{% extends "layout.html" %}

{% block title %}所有模组列表{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2>所有模组列表</h2>
    <span class="badge bg-primary">共 {{ mods|length }} 个模组</span>
</div>

<div class="table-responsive">
    <table class="table table-striped table-hover align-middle">
        <thead class="table-dark">
            <tr>
                <th scope="col"><center>封面</center></th>
                <th scope="col">模组名称</th>
                <th scope="col">模组标签</th>
                <th scope="col">浏览量</th>
                <th scope="col">红</th>
                <th scope="col">黑</th>
            </tr>
        </thead>
        <tbody>
            {% for mod in mods %}
            <tr>
                <td>
                    <img src="{{ mod['mod封面'] }}"
                         alt="{{ mod['mod名称'] }} 封面"
                         class="img-thumbnail"
                         style="max-width: 80px; max-height: 80px;"
                         referrerpolicy="no-referrer"
                         onerror="this.src='https://via.placeholder.com/80x80?text=No+Image'">
                </td>
                <td><strong>{{ mod['mod名称'] }}</strong></td>
                <td>
                    {% for tag in mod['mod标签'] %}
                    <span class="badge bg-secondary me-1">{{ tag }}</span>
                    {% endfor %}
                </td>
                <td>{{ mod['mod浏览量'] }}</td>
                <td>{{ mod['红票'] }}</td>
                <td>{{ mod['黑票'] }}</td>
            </tr>
            {% else %}
            <tr>
                <td colspan="4" class="text-center">数据库中暂无模组数据，请先运行爬虫脚本。</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
